<template>
	<view>
		<view style="background-color: #2b85e4; padding: 40rpx;">
			<view style="width: 140rpx; height: 140rpx; border: 1px solid #fff; border-radius: 50%; margin: 0 auto;">
				<u-avatar src="/static/img/avatar.png" size="120rpx" style="margin: 10rpx;"></u-avatar>
			</view>
		</view>
		<view style="padding: 40rpx;">
			<u--form :model="user" ref="uForm" labelWidth="160rpx" labelAlign="left">
				<u-form-item label="姓名" prop="nickName" class="u-border-bottom">
					<u--input placeholder="请输入内容" border="none" v-model="user.nickName"></u--input>
				</u-form-item>
				<!-- <u-form-item label="楼层" prop="floor" class="u-border-bottom" @click="showFloor = true;">
					<u--input v-model="userInfo.floor" disabled disabledColor="#ffffff" placeholder="请选择楼层"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item> -->
				<u-form-item label="区域" prop="area" class="u-border-bottom" @click="showArea = true;">
					<uni-data-select v-model="area" :localdata="areaList" placeholder="请选择区域"></uni-data-select>
				</u-form-item>
				<!-- <u-form-item label="线别" prop="line" class="u-border-bottom">
					<u-checkbox-group v-model="userInfo.line">
						<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
							:label="item.name" :name="item.name">
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item> -->
				<u-form-item label="性别" prop="gender" class="u-border-bottom">
				  <u-radio-group v-model="user.gender" size="36rpx">
				    <u-radio shape="circle" label="男" name="男" labelSize="32rpx"></u-radio>
				    <u-radio shape="circle" label="女" name="女" labelSize="32rpx" style="margin-left: 36rpx;"></u-radio>
				  </u-radio-group>
				</u-form-item>
				<u-form-item label="手机号码" prop="phone" class="u-border-bottom">
				  <u--input
				    placeholder="请输入内容"
				    border="none"
				    v-model="user.phone"
				  ></u--input>
				</u-form-item>
				<u-form-item label="邮箱" prop="email" class="u-border-bottom">
				  <u--input
				    placeholder="请输入内容"
				    border="none"
				    v-model="user.email"
				  ></u--input>
				</u-form-item>
			</u--form>
			<!-- <u-action-sheet :show="showFloor" :actions="actionsFloor" title="请选择楼层" @close="showFloor = false"
				@select="floorSelect">
			</u-action-sheet> -->
		</view>
		<view style="padding: 40rpx;">
			<u-row gutter="32">
				<u-col span="6">
					<u-button icon="arrow-left" text="返回" plain @click="goBack()"></u-button>
				</u-col>
				<u-col span="6">
					<u-button icon="checkmark-circle" text="保存" type="primary" @click="save"></u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import {
		uniDataSelect
	} from '@dcloudio/uni-ui'
	import storage from '@/utils/storage'
	import { mapGetters } from 'vuex'
	export default {
		components: {
			uniDataSelect
		},
		data() {
			return {
				userInfo: {
					nickName: '若依',
					floor: '',
					area: '',
					line: []
				},
				area: '',
				areaList: [],
				showFloor: false,
				showArea: false,
				actionsFloor: [{
						name: '2F',
					},
					{
						name: '3F',
					},
					{
						name: '4F',
					},
				],
				actionsArea: [{
						name: '总装区',
					},
					{
						name: '部装区',
					},
					{
						name: '齐套区1',
					},
					{
						name: '齐套区2',
					},
					{
						name: '播种区1'
					},
					{
						name: '播种区2'
					}
				],
				checkboxList1: [{
						name: '1线',
						disabled: false
					},
					{
						name: '2线',
						disabled: false
					},
					{
						name: '3线',
						disabled: false
					}
				],
			}
		},
		computed: {
		    ...mapGetters([
		      'user'
		    ]),
		  },
		created() {
			this.area = storage.get('area')
			this.areaList = storage.get('areaList')
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			floorSelect(e) {
				this.userInfo.floor = e.name
				this.$refs.uForm.validateField('userInfo.floor')
			},
			areaSelect(e) {
				this.userInfo.area = e.name
				this.$refs.uForm.validateField('userInfo.area')
				
			},
			save() {
				storage.set('area', this.area)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-checkbox-label--left {
		margin-right: 16px;
		margin-bottom: 0px !important;
	}
	::v-deep .uni-select {
		border: 0;
		padding: 0;
	}
</style>